<!--
 * Description: 成本模型计算(PKG)
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/10/16 9:26
-->

<template>
  <BaseWrap>
    <div class="model-calc">
      <!-- 选择 -->
      <div class="select-area">
        <!-- Commodity -->
        <el-select
          v-model="commodity"
          clearable
          filterable
          placeholder="请选择"
          size="mini"
          style="width:160px"
        >
          <el-option
            v-for="item in commodityList"
            :key="item.name"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </div>
      <!-- 显示区域 -->
      <div class="show-area">
        <CalcModel :commodity="commodity" :gcmFunction="gcmFunction" />
      </div>
    </div>
  </BaseWrap>
</template>
<script>
import CalcModel from './components/CalcModel'
export default {
  name: 'PkgModelCalc',

  components: {
    CalcModel
  },
  data() {
    return {
      gcmFunction: 'PKG',

      commodity: ''
    }
  },

  computed: {
    commodityList() {
      return this.$store.getters['commodity/getCommodityCollectsByGcmFunction'](this.gcmFunction)
    }
  },

  watch: {
    gcmFunction: {
      handler() {
        this.commodity = ''
      }
    }
  },

  created() {
    this.$store.dispatch('commodity/initCommodityCollects')
  }
}
</script>
<style lang="scss" scoped>
.model-calc {
  height: 100%;
  text-align: left;
  overflow: hidden;
}
.select-area {
  position: relative;
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  background: rgba(208, 208, 208, 0.3);
  > div {
    margin-right: 10px;
  }
  .type-select {
    position: absolute;
    top: 10px;
    right: 10px;
  }
}
.show-area {
  padding: 30px 0;
  height: calc(100% - 50px);
  overflow-y: auto;
}
</style>
